<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <script src="/layui/layui.all.js"></script>
    <script src="/layui/lay/modules/jquery.js"></script>


</head>
<body>

<form class="layui-form" id="changeForm" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">单行输入框</label>
        <div class="layui-input-block">
            <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">验证必填项</label>
        <div class="layui-input-block">
            <input type="text" name="username" lay-verify="required" lay-reqtext="用户名是必填项，岂能为空？" placeholder="请输入"
                   autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">范围</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid">-</div>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <label>单行选择框</label>
    <select>
        <option value=""></option>
        <option value="0">写作</option>
        <option value="1">阅读</option>
        <option value="2">游戏</option>
        <option value="3">音乐</option>
        <option value="4">旅行</option>
    </select>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">搜索选择框</label>
            <div class="layui-input-inline">
                <div class="layui-form">
                    <select name="modules" id="sel" lay-verify="required" lay-search="">

                    </select>
                </div>
            </div>
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">复选框</label>
        <div class="layui-input-block">
            <input type="checkbox" name="like[write]" title="写作">
            <input type="checkbox" name="like[read]" title="阅读">
            <input type="checkbox" name="like[game]" title="游戏">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-upload" style="height: auto">
            <button type="button" class="layui-btn layui-btn-normal" id="testList">选择图片</button>
            <div class="layui-upload-list">
                <table class="layui-table">
                    <thead>
                    <tr>
                        <th>文件名</th>
                        <th>大小</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="demoList"></tbody>
                </table>
            </div>
            <!--<button type="button" class="layui-btn" id="testListAction">开始上传</button>-->
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="changeSubmit">立即提交</button>
            <button class="layui-btn layui-btn-primary" type="reset">重置</button>
        </div>
    </div>
</form>

<script>
    layui.use(['form', 'upload'], function () {
        var form = layui.form
            , $ = layui.jquery
            , upload = layui.upload
            , files=null;
        form.render();

        //多文件列表示例
        var
            demoListView = $('#demoList')
            , uploadListIns = upload.render({
                elem: '#testList'
                , url: '/upload/'
                , accept: 'images'
                , exts: 'jpg|png|jpeg|gif|bmp'
                , multiple: true
                , auto: false
                , method: 'post'
                , size: 800      //允许上传大小，单位kb
                // , bindAction: '#testListAction'  //上传摁钮监听
                , choose: function (obj) {
                    files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                    //读取本地文件
                    obj.preview(function (index, file, result) {
                        var tr = $(['<tr id="upload-' + index + '">'
                            , '<td>' + '<img src="' + result + '" style="width: 80px;height: 80px" alt="' + file.name + '" class="layui-upload-img">' + file.name + '</td>'
                            , '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
                            , '<td>等待上传</td>'
                            , '<td>'
                            , '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                            , '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                            , '</td>'
                            , '</tr>'].join(''));

                        //单个重传
                        tr.find('.demo-reload').on('click', function () {
                            obj.upload(index, file);
                        });

                        //删除
                        tr.find('.demo-delete').on('click', function () {
                            delete files[index]; //删除对应的文件
                            tr.remove();
                            uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                        });

                        demoListView.append(tr);
                    });
                }
                , done: function (res, index, upload) {
                    if (res.code == 0) { //上传成功
                        var tr = demoListView.find('tr#upload-' + index)
                            , tds = tr.children();
                        tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                        tds.eq(3).html(''); //清空操作
                        return delete this.files[index]; //删除文件队列已经上传成功的文件
                    }
                    this.error(index, upload);
                }
                , error: function (index, upload) {
                    var tr = demoListView.find('tr#upload-' + index)
                        , tds = tr.children();
                    tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                    tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                }
            });

        form.on('submit(changeSubmit)', function (data) {
            alert(111);
            var myForm = document.getElementById("changeForm");
            var formData = new FormData(myForm);
            //循环 files(存入多图片choose回调中储存的对象)  逐条插入到formData
            for (var i in files) {
                formData.append("files",files[i]);//此处的files为上传接口参数名
            }
            $.ajax({
                url: '/room/updateOneAll',
                type: 'post',
                data: formData,
                async : false,
                contentType: false,   //ajax 中 contentType 设置为 false 是为了避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件
                processData: false,   //当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
                success: function (info) {
                    layer.msg('添加成功', {
                        time: 1200, //1.2s后自动关闭
                    });
                    layer.closeAll();
                    window.parent.location.reload();// 重新渲染页面
                },
                error : function(request) {
                    parent.layer.alert("网络超时");
                },
            });
            return false;
        })
    });
</script>

</body>
</html>